<script setup>
import { ref } from 'vue'
import contentApi from '../http/httpContentRequest.js'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

const formLabelWidth = ref('100px')
const tableData = ref([])

// 分页相关
const pageSize = ref(3)
const pageNum = ref(1)
const total = ref(0)

const searchContent = async () => {
  const result = await contentApi.doGet(`/content/search?page=${pageNum.value}&size=${pageSize.value}`);
  tableData.value = result.data.rows
  total.value = result.data.total
}

const handleCurrentChange = (num) => {
  pageNum.value = num
  searchContent()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  searchContent()
}

</script>

<template>
  <div>
    <el-container>
      <el-header>
        广告列表
      </el-header>
      <el-main>
        <el-card>
          <el-button type="primary" @click="searchContent">
            搜索
          </el-button>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="广告id" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="url" label="路径" />
            <el-table-column prop="pic" label="图片" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-button>
                <el-button size="small" type="text" @click="handleDelete(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.content-list {
  text-align: center;
}

.content-form {
  display: flex;
  text-align: center;
  justify-content: space-around;
}
</style>
